<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/Universal.css">
    <link rel="stylesheet" href="../css/bishouxi.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <iframe src="../html/head.html" height="70px"  width="100%" frameborder="0"></iframe>
   <div class="market-list">
    <div class="l-market">
        <div class="detail-header">
            <div class="detail-pic">
                <div class="f-center" style="width:269px">
                    <img src="https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc" alt="">
                </div>
                <div class="detail-cover"></div>
            </div>
            <div class="detail-count">
                <div>
                    <div class="detail-faw">
                        <h1>刺刀（★） | 大马士革钢 (久经沙场)</h1>
                    </div>
                    <p>
                        <span><label for="">品质 |</label>隐秘</span>
                        <span><label for="">类别 |</label>★</span>
                        <span><label for="">类型 |</label>匕首</span>
                    </p>
                    <div class="blank1"></div>
                    <div class="line"></div>
                    <div class="blank1"></div>
                    <div class="detail-sumn">
                        <div class="l-right">
                            <a href="" class="i-btn" onclick="sell()">我要出售</a>
                            <a href="" class="i-btn2" onclick="buy()">我要求购</a>
                        </div>
                        <span>
                            <label for="">参考价格</label>
                            <strong class="o-strong">￥1916.73
                                <small class="hide-usd">($279.86)</small>
                            </strong>
                        </span>
                        <a href="">查看steam市场</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="rela-goods">
            <a href="" class="i-goods">崭新出厂 ￥1680</a>
            <a href="" class="i-goods">略有磨损 ￥1510</a>
            <a href="" class="i-goods active">久经沙场 ￥1333</a>
            <a href="" class="i-goods">破损不堪 ￥1298</a>
            <a href="" class="i-goods">战痕累累 ￥1229</a>
        </div>
        <div class="blank1"></div>
        <div class="market-header">
            <div class="cont-tab">
                <div class="l-right" style="display: block;">
                    <a href="" class="i-btn">批量购买</a>
                </div>
                <div class="blank6"></div>
                <ul class="new-tab">
                    <li class="selling on">
                        <a href="">当前在售(51)</a>
                    </li>
                    <li class="buying">
                        <a href="">当前求购(<span id="buy-num">16</span>)</a>
                    </li>
                    <li class="user-preview">
                        <a href="../html/comment.html">买家秀(<span id="show-num">1000+</span>)</a>
                    </li>
                    <li class="history">
                        <a href="">成交记录</a>
                    </li>
                    <li class="price-chart">
                        <a href="">价格趋势</a>
                    </li>
                    <li class="paintwear-rank">
                        <a href="">磨损排行</a>
                    </li>
                    <li class="related">
                        <a href="">相关推荐</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="detail-tab-cont">
            <table class="list-tb" wodth="100%">
                <tbody class="list-tb-csgo">
                    <tr>
                        <th width="20"></th>
                        <th width="100">饰品</th>
                        <th style="min-width: 100px;" class="t-left"><span>磨损度</span></th>
                        <th style="min-width: 120px;" class="t-left"><span>卖家</span></th>
                        <th style="min-width: 100px;" class="t-left"><span>价格</span></th>
                        <th width="220" class="t-left"><span>操作</span></th>
                    </tr>
                    <!-- <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="" class="sellImg" id="sellImg">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.21631714701652527</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip" id="sellName">小乐开金</a>
                            <img src="https://g.fp.ps.netease.com/market/file/5c6f978b8b7427dcb0a55bc4kt0k93Jf02" alt="" id="sellPortrait">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1339.5</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr> -->
                    <!-- <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont" >
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.2226530760526657</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">CHEN17</a>
                            <img src="https://g.fp.ps.netease.com/market/file/6161ad7dbca47bb4830023253KbOXrBT03" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1339.5</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr>
                    <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.2012951523065567</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">救救孩子吧</a>
                            <img src="https://g.fp.ps.netease.com/market/file/606d8c3f6f04940da4fd0c06sFkfdyW203" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1349</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr>
                    <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.22120754420757294</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">听风2069</a>
                            <img src="https://g.fp.ps.netease.com/market/file/5ed107287f9d2a1899bfc3advUwd7SBX02" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1350</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr>
                    <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.2172365039587021</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">U02515009592</a>
                            <img src="https://g.fp.ps.netease.com/market/file/5c7ddf62a7f2520480c38b9eJEeop64U02" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1350</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr>
                    <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.19620974361896515</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">姜太公的小店</a>
                            <img src="https://g.fp.ps.netease.com/market/file/5c4994af8b7427196aca7aeblbTq8TJS02" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1350</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr>
                    <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.2127610146999359</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">求你了哥哥哥</a>
                            <img src="https://g.fp.ps.netease.com/market/file/6129fb83a7f25218d33e15c46qEiSUil03" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1350</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr>
                    <tr class="selling">
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="	https://g.fp.ps.netease.com/market/file/5aa02a7a69b21a88c3aef9a70eyFYOfc?fop=imageView/2/w/300/h/300" alt="">
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">磨损: 0.20088237524032593</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">埃斯金的杂货店</a>
                            <img src="https://g.fp.ps.netease.com/market/file/61ffd2f3052dfe4585a852d1pkEiKZWW04" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥1350</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                    </tr> -->
                </tbody>
            </table>
            <div class="card-page">
                <ul>
                <li><span class="current-prev">上一页</span></li>
                <li><span class="current">1</span></li>
                <li><a href="" class="page-link">2</a></li>
                <li><a href="" class="page-link">3</a></li>
                <li><a href="" class="page-link">4</a></li>
                <li><a href="" class="page-link">5</a></li>
                <li><a href="" class="page-link-next">下一页</a></li>
                </ul>
                </div>
        </div>
    </div>
   </div>
   <button style="position:absolute;left:-1000px;bottom:0" id="btnModal" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    隐藏的按钮
  </button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">登录/注册</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        <div class="inputdiv1">
            <div class="inputem">
                <em>+86</em>
            </div>
            <input type="text" name="" id="" placeholder="请输入网易手机账号" class="input1">
        </div>
        <div class="inputdiv1">
            <div class="inputem2">
                <em>→</em>
            </div>
            <input type="text" name="" id="" placeholder="向右拖动滑块填充拼图" class="input1">
        </div>
        <div class="inputdiv1">
            <input type="text" name="" id="" placeholder="请输入短信验证码" class="input2">
            <div class="inputem3">
                <a href="">获取验证码</a>
            </div>
        </div>
        <input type="checkbox" name="">十天内免登录<br>
        <input type="checkbox" name="">我同意《用户需要》、《隐私政策》、《第三方服务共享清单》</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确认</button>
        </div>
      </div>
    </div>
  </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.js"></script>
    <iframe src="footer-di.html" height="301px"  width="100%" frameborder="0" class="footer2"></iframe>
</body>
<script>
     $(function () {
            $.ajax({
                url: 'http://localhost:3000/api/getProductsByProductId?product_id=1',
                success: function (result) {
                    console.log('res', result)
                    var data = result.data
                    var strHTML = `
                    <tr>
                        <th width="20"></th>
                        <th width="100">饰品</th>
                        <th style="min-width: 100px;" class="t-left"><span>磨损度</span></th>
                        <th style="min-width: 120px;" class="t-left"><span>卖家</span></th>
                        <th style="min-width: 100px;" class="t-left"><span>价格</span></th>
                        <th width="220" class="t-left"><span>操作</span></th>
                    </tr>
                    `
                    for (var i = 0; i < data.length; i++) {
                        strHTML += `
                        <tr>
                        <td></td>
                        <td class="img-td">
                            <div class="pic-cont">
                                <img src="http://localhost:3000/${data[0].pic}" alt="" class='imgProduct'>
                                <a href=""></a>
                            </div>
                        </td>
                        <td class="t-left"><div class="wear-value">${data[0].mosun}</div></td>
                        <td class="t-left">
                            <a href="" class="j-shoptip">${data[0].products.user}</a>
                            <img src="http://localhost:3000/${data[0].products.headpic}" alt="">
                        </td>
                        <td class="t-left">
                            <div><strong class="o-strong">￥${data[0].price}</strong></div>
                        </td>
                        <td class="t-left"><a href="" class="i-Btn-mid2">购买</a></td>
                        </tr>
                        `
                    }
                    $('.list-tb').html(strHTML)
                }
              
            })
        })
</script>
</html>